This article will teach how to show list and Inactive student using ASP.NET MVC AngularJS Jquery. This will allow to learn about bootstrap design and fetch json data and set to javascript.

Steps:

Step-1: StudentList.cshtml page with writing the below code.

<div ng-app="ABCApp" ng-controller="StudentController">
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <div class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1 class="m-0 text-dark">Student List</h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <li class="breadcrumb-item"><a href="../Student/StudentEntry">Add New Info</a></li>

                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        <!-- /.content-header -->
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">

                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group">
                            <label>Batch Name</label>
                            <select class="form-control" ng-model="StudentDAO.BatchId" ng-change="LoadStudentListByBatchID(StudentDAO.BatchId)">
                                <option ng-repeat="e in Batch" value="{{e.BatchId}}">{{e.BatchName}}</option>
                            </select>
                        </div>
                    </div>
                </div>

                    <div class="row">

                        <div class="col-md-12">

                            <table class="table table-responsive">
                                <tr>
                                    <td>SL#</td>
                                    <td>Student Id NO</td>
                                    <td>Student Name</td>
                                    <td>Batch Name</td>
                                    <td>Section Name</td>
                                    <td>Gender</td>
                                    <td>Edit</td>
                                    <td>Inactive</td>
                                </tr>
                                <tr ng-repeat="e in Student" ng-class-even="'even'" ng-class-odd="'odd'">
                                    <td>{{e.SL}}</td>
                                    <td>{{e.StudentIdNO}}</td>
                                    <td>{{e.StudentName}}</td>
                                    <td>{{e.BatchName}}</td>

                                    <td>{{e.SectionName}}</td>

                                    <td>{{e.Gender}}</td>


                                    <td>
                                        <a href="/Student/StudentEntry?MasterId={{e.StudentId}}" class="btn btn-warning">Edit</a>

                                    </td>
                                    <td><a ng-click="DeleteMAsterData(e.StudentId)" class="btn btn-danger">Inactive</a> </td>
                                </tr>
                            </table>


                        </div>
                    </div>





                </div>
</section>
    </div>
</div>
<script src="~/Scripts/angular.min.js"></script>
 
<script src="~/Scripts/AngularController/StudentControllerJS.js"></script>

Step-2:

• Add LoadStudentListByBatchID() in StudentControllerJS.js file.
• Go to Solution Explorer > Scripts Folder.> AngularController Folder> Create   ‘StudentControllerJS.js> for   Load Student Information    with writing the below code.

$scope.LoadStudentListByBatchID = function (BatchId) {
        $http.get("/Student/LoadData?BatchId=" + BatchId).then(function (d) {
            $scope.Student = d.data;
        }, function (error) {
            alert("Faild");
        });
    };

Step-3:

• In   StudentController.cs class add LoadData() JsonResult for Load Student Information.
• Go to Solution Explorer > Controllers Folder > StudentController.cs  in this controller with writing the below code.

        public JsonResult LoadData(int BatchId)
        {
            DataSet ds = aDal.LoadAllDataDAL(BatchId);
            List<StudentDAO> lists = new List<StudentDAO>();
            foreach (DataRow dr in ds.Tables[0].Rows)
            {
                lists.Add(new StudentDAO
                {
                    StudentId = Convert.ToInt32(dr["StudentId"]),
                    SL = (dr["SL"].ToString()),

                    StudentIdNO = (dr["StudentIdNO"].ToString()),
                    StudentName = (dr["StudentName"].ToString()),
                    BatchName = (dr["BatchName"].ToString()),
                    SectionName = (dr["SectionName"].ToString()),
                    Gender = (dr["Gender"].ToString())
                });
            }
            return Json(lists, JsonRequestBehavior.AllowGet);
        }

Step-4:

• Add LoadAllDataDAL() in  StudentDAL.cs  class.
• Go to Solution Explorer > DAL Folder > StudentDAL.cs  Class with writing the below code.

        public DataSet LoadAllDataDAL(int BatchId)
        {
            SqlCommand com = new SqlCommand("sp_LoadAllData_Student", conn);
            com.CommandType = CommandType.StoredProcedure;

            com.Parameters.AddWithValue("@BatchId", BatchId);
            SqlDataAdapter da = new SqlDataAdapter(com);
            DataSet dss = new DataSet();
            da.Fill(dss);
            return dss;
        }

Step-5:

• Create store Procedure for Section Name.
• Go to SQL Server 2014 > dbStudentMangeSystem database> Programmability> stored procedures> Select New> stored procedure>Create sp_LoadAllData_Student with writing the below code.

create proc [dbo].[sp_LoadAllData_Student]

@BatchId int
as 
begin
select ROW_NUMBER() over (order by  st.StudentId) as SL, ba.BatchName + st.StudentIdNO StudentIdNO, sec.SectionName, ba.BatchName,   * from tblStudent as st
left join tblBatch ba on ba.BatchId=st.BatchId
left join tblSection sec on sec.SectionId=st.SectionId

where st.BatchId=@BatchId
end

Step-6:

• Add DeleteMAsterData() in StudentControllerJS.js file.
• Go to Solution Explorer > Scripts Folder.> AngularController Folder> Create   ‘StudentControllerJS.js> for   inactive Student Information    with writing the below code.

$scope.DeleteMAsterData = function (StudentId) {
        $http.get("/Student/StatusChangeStudentByMAsterId?StudentId=" + StudentId).then(function (d)             
{
            alert(d.data);
            location.reload();
        },
            function (error) {
                alert("Faild");
            }
        );
    };

Step-7:

• In   StudentController.cs class add StatusChangeStudentByMAsterId() JsonResult for  Inactive Student Information.
• Go to Solution Explorer > Controllers Folder > StudentController.cs  in this controller with writing the below code.

        public JsonResult StatusChangeStudentByMAsterId(int StudentId)
        {
            string result = string.Empty;
            try
            {
                aDal.DeleteInfoDAL(StudentId);
                result = "Operation Deleted";
            }
            catch (Exception)
            {
                result = "Operation Faild";
                //throw;
            }
            return Json(result, JsonRequestBehavior.AllowGet);
        }

Step-8:

• Add DeleteInfoDAL() in  StudentDAL.cs  class.
• Go to Solution Explorer > DAL Folder > StudentDAL.cs  Class with writing the below code.

        public void DeleteInfoDAL(int StudentId)
        {
            SqlCommand com = new SqlCommand("Inactive_Student_ByMasterId", conn);
            com.CommandType = CommandType.StoredProcedure;
            com.Parameters.AddWithValue("@StudentId", StudentId);

            conn.Open();
            com.ExecuteNonQuery();
            conn.Close();
        }

Step-9:

• Create store Procedure for Section Name.
• Go to SQL Server 2014 > dbStudentMangeSystem database> Programmability> stored procedures> Select New> stored procedure>Create Inactive_Student_ByMasterId with writing the below code.

create proc [dbo].[Inactive_Student_ByMasterId]

@StudentId int 
as 

begin

update   tblStudent set  Status=0  where StudentId=@StudentId
end

Step-10: Run Application.